<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人资料</title>
    <link rel="stylesheet" href="../../../assets/common/common.css" />
    <link rel="stylesheet" href="../../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./children.css" />
  </head>
  <body>
    <div class="children">
      <div class="banner bold pl-15 pr-15 flex aic jc-sb f20 bg-fff">
        <a
          href="javascript:history.back(-1)"
          class="iconfont icon-zuojiantou"
        ></a>
        <span>个人资料</span>
        <a href="" class="iconfont fcc">
          <img src="../../../assets/img/My/u10268.png" alt="" />
        </a>
      </div>
      <!-- 列表 -->
      <div class="person pl-15 pr-15 bg-fff">
        <div class="item flex aic">
          <img src="../../../assets/img/MailList/__80px_u10143.png" alt="" />
          <div class="ml-15 fg1 h100 fdc jc-c">
            <div class="flex aic jc-sb w100">
              <span>吴珊珊</span>
              <span class="text f12">在职</span>
            </div>
            <div class="f14 mt-5 gary">产品经理</div>
          </div>
        </div>
      </div>
      <!-- 员工列表 -->
      <div class="detailList pl-20 mt-10 bg-fff fdc">
        <div class="item flex aic">
          <span class="attribute gary">性别</span>
          <span>女</span>
        </div>
        <div class="item flex aic">
          <span class="attribute gary">年龄</span>
          <span>23</span>
        </div>
        <div class="item flex aic">
          <span class="attribute gary">手机号码</span>
          <span id="phone" class="bule">18878006788</span>
        </div>
        <div class="item flex aic">
          <span class="attribute gary">邮箱地址</span>
          <span>ahgko009@163.com</span>
        </div>
        <div class="item flex aic">
          <span class="attribute gary">公司</span>
          <span>黛西进出口贸易公司</span>
        </div>
        <div class="item flex aic">
          <span class="attribute gary">部门</span>
          <span>产品部</span>
        </div>
        <div class="item flex aic">
          <span class="attribute gary">职位</span>
          <span>产品经理</span>
        </div>
      </div>
      <!-- 荧幕 -->
      <div class="pop dsn fixed">
        <div class="popBox bg-fff fdc">
          <div class="phone bule fcc f20">18878006788</div>
          <div class="flex aic jc-c fg1">
            <span id="but" class="gary fg1 fcc b-r h100">取消</span>
            <span id="but" class="bule fg1 fcc">拨打</span>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $("#phone").click(function () {
      $(".pop").removeClass("dsn");
      $(".pop").addClass("fcc");
    });
    $(".pop").on("click", "#but", function () {
      $(this).closest(".pop").addClass("dsn");
      $(this).closest(".pop").removeClass("fcc");
    });
  </script>
</html>
